<template>
	<div class="myArticle">
		<div class="myArticle-top-bg" :style="{ backgroundImage: 'url(' + (getMyArticle?.bgImagePath || bgUrl) + ')',
		backgroundRepeat: 'no-repeat' }">
			<h1>我的文章</h1>
		</div>
		<el-empty description="快去写文章吧!" v-if="myArtileList.length==0" :image-size="500"
			image="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png">
		</el-empty>

		<div class="conter" v-if="myArtileList.length!=0">
			<div class="block">
				<el-timeline>
					<el-timeline-item v-for="(item,index) in myArtileList" :key="index" :timestamp="item.createDate"
						placement="top" type="success">
						<el-card style="margin: 10px 0;padding: 20px 0px;">
							<div class="content-title">
								<div style="float: left;font-weight: 700;font-size: 20px;">
									<span class="titleH" @click="gotoDateli(item)">{{item.title}}</span>
								</div>
								<div style="float: right;text-align: center;">
									<i class="iconfont icon-yanjing"></i>&nbsp;
									<span>{{item.viewCounts}}</span> <span style="margin-left: 5px;">{{item.commentCounts}}</span>
								</div>
							</div>

							<div class="content-summarize">
								概述 : {{item.summary}}
							</div>

							<div class="content-author">
								作者 : &nbsp;
								<span style="color: gray;">{{
									item.userInfo.id==$route.params.uid ? "本人":item.author
									}}</span>
							</div>
							<div class="content-tag">
								<div>
									标签 : <span class="tag" v-for="(i,indexs) in item.tags">{{i.tagName}}</span>
								</div>
								<div>
									<span v-if="item.isInspect==0" style="color: rgb(138, 135, 135);">审核中</span>
									<span v-if="item.isInspect==2" style="color: red;">审核未通过</span>
									{{item.isShow==1?"已公开":"仅自己可见"}}
								</div>
							</div>
						</el-card>
					</el-timeline-item>
				</el-timeline>
			</div>
			<!-- 分页 部分-->
			<div style="width: 100%;margin: 0 auto;text-align: center;">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="params.pageNum" :page-sizes="[5,10,15]" :page-size="params.pageSize"
					layout="  prev, pager, next " :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				myArtileList: [],
				params: {
					pageNum: 1,
					pageSize: 8
				},
				total: null,
				bgUrl: "https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg-background/category-01.jpg"
			};
		},
		created() {
			this.getmyArtileList()
		},
		computed: {
			// 通过 mapGetters 辅助函数映射 getters 到组件的计算属性
			...mapGetters(['getMyArticle'])
		},
		methods: {
			getmyArtileList() {
				this.$api.common.getMyArticle(this.params, this.$route.params.uid).then(res => {
					if (res.code == 200) {

						this.myArtileList = res.data
						this.total = res.pageParams.total
					}
				})
			},
			gotoDateli(item) {
				this.$router.push({
					name: "articleDetail",
					params: {
						id: item.id
					}
				})
			},
			handleSizeChange(pageSize) {
				this.params.pageSize = pageSize
				this.getmyArtileList()
			},
			handleCurrentChange(pageNum) {
				this.params.pageNum = pageNum
				this.getmyArtileList()
			}
		}

	};
</script>

<style lang="less" scoped>
	.myArticle-top-bg {
		min-width: 100%;
		height: 500px;
		background-size: 100% 100%;
		background-attachment: fixed;
		background-position-y: -50px;
		position: relative;


	}


	.myArticle-top-bg h1 {
		text-align: center;
		position: relative;
		top: 250px;
		font-size: 30px;
		font-weight: 700;
		// color: white;
	}


	.conter {
		width: 1250px;
		height: auto;
		// border: 1px solid red;
		margin: 10px auto;
		padding-top: 30px;
	}


	// 内容分页部分 star
	.content {
		width: 1000px;
		height: auto;
		margin: 10px auto;
		box-sizing: border-box;
	}

	.content-title {
		width: 100%;
		box-sizing: border-box;
		cursor: pointer;
	}

	.titleH:hover {
		color: #95e7b3;
	}


	.content-summarize {
		clear: both;
		position: relative;
		top: 10px;
	}

	.content-author {
		position: relative;
		top: 20px;
		display: flex;
	}

	.content-tag .tag {
		height: 20px;
		line-height: 20px;
		background-color: rgba(103, 194, 58, .1);
		border-radius: 5px;
		border-color: rgba(103, 194, 58, .2);
		padding: 3px;
		color: #67c23a;
		margin: 0 5px;
		cursor: pointer;
	}

	.content-tag {
		position: relative;
		top: 30px;
		display: flex;
		justify-content: space-between;
	}

	// 内容分页部分 end
</style>